<template>
  <view class="page">
    <view class="total">
      <view class="hea">
        <view class="financeSchool">
          <view>待采销</view>
          <view>请前往悦采超市-松浦门店进行核销</view>
        </view>
        <view class="photo">
          <img src="@/static/images/news/cen1.png" alt="">
        </view>
      </view>
      <view class="hea1">
        <view class="shop">
          <img src="@/static/images/news/flower.png" alt="">
          <view class="shop1">
            <view class="firststy">悦采超市-松浦门店</view>
            <view class="firststy1">店铺地址：哈尔滨松北区松浦大道观江国际a区4号楼1单元102室</view>
          </view>
          <view class="distance">0.5km</view>
        </view>
        <view class="shop2">
          <view class="diskn">
            <img src="@/static/images/news/flower.png" alt="">
            <view class="disk">
              <view class="disk1">
                <view class="nun">
                  <view>真花摆设向日葵客厅电视玄关桌面餐桌花摆花</view>
                  <view class="sun">
                    <view>¥19.80</view>
                    <view class="ms">x1</view>
                  </view>
                </view>

                <view class="xum">
                  <view>向日葵</view>
                  <view>实付款:¥19.80</view>
                </view>
              </view>
              <view class="tuiok">退款</view>
            </view>
          </view>
        </view>

      </view>

    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>

<style lang="scss">
.page {
  .total {
    //绝对定位
    position: relative;

    .hea {
      color: white;
      padding: 35rpx;
      height: 300rpx;
      //border: 1px solid red;
      background-color: #2C4076;
      display: flex;
      //弹性布局两边留空
      justify-content: space-between;

      .photo {
        padding-right: 30rpx;

        img {
          width: 80rpx;

        }
      }

    }
  }

  .hea1 {

    margin: 40rpx;


    //相对定位
    position: absolute;
    top: 100rpx;
    left: 0;
    right: 0;

    .shop {
      background: #FFFFFF;
      border-radius: 16rpx;

      padding: 15rpx;
      display: flex;
      gap: 15rpx;
      justify-content: center;


      .shop1 {
        padding-top: 20rpx;
        flex: 1;

        .firststy {
          font-weight: 800;

        }

        .firststy1 {

        }

      }

      .distance {
        padding-top: 18rpx;
        color: #888888;
      }
    }

    //
    .shop2 {

      margin-top: 15rpx;
      //border: 1px solid black;
      border-radius: 16rpx;

      img {

      }

      .diskn {
        display: flex;
        background-color: #FFFFFF;

        img {
          //border: 1px solid black;
        }

        .disk {
          //border: 1px solid red;
          flex: 1;


          .disk1 {
            display: flex;
            //竖向排列
            flex-direction: column;
            gap: 10rpx;
            flex: 1;

            .nun {
              flex: 1;
              //border: 1px solid green;
              display: flex;
              justify-content: space-between;
              padding: 0 10rpx;

              .sun {
                display: flex;
                //竖向排序
                flex-direction: column;
                gap: 10rpx;

                text-align: right;
              }

            }

            .xum {
              display: flex;
              justify-content: space-between;
              flex: 1;
              //border: 1px solid blue;
              padding: 0 20rpx;

            }

          }

          .tuiok {

            border: 1px solid black;
            display: inline;
            //椭圆形
            width: 100rpx;
            height: 50rpx;
            text-align: center;
            border-radius: 50% 50% 15% 15%;
            float: right;
            margin-top: 20rpx;
            margin-right: 20rpx;


          }

        }


      }

    }

  }
}

</style>
